import { useIntersectionObserver } from '@vueuse/core'
import type { MaybeElement, MaybeElementRef } from '@vueuse/core'

/**
 * 组件数据懒加载
 * @param target 需要监听的元素
 * @param apiFn 需要执行的 API 函数
 */
export const useLazyData = (target: MaybeElementRef<MaybeElement>, apiFn: () => void) => {
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 当目标元素进入可视区域发送请求
        apiFn()

        // 请求已发送，主动停止检查
        stop()
      }
    },
    {
      threshold: 0
    }
  )
}
